<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		<script type="text/javascript" src="../layui/layui.js"></script>
	</head>
	<body class="layui-layout-body">
		<div>
			<div class="layui-inline">
				<input type="text" name="title" required lay-verify="required" placeholder="请输入物品名称" autocomplete="off" class="layui-input" style="width:125px;" >
			</div>
			<div class="layui-inline">
				<button type="button" class="layui-btn"  id="findById">查找物品</button>
			</div>
		
		</div>
		<table class="layui-hide" id="test" lay-filter="test"></table>

		<script type="text/javascript">

		
			
		var tableInit = function(url){
			layui.use('table', function(){
			  var $ = layui.$
			  var table = layui.table;
			  
			  table.render({
			    elem: '#test'
			    ,url:url
				,parseData: function(res){ //res 即为原始返回的数据
				    return {
				      "code": 0, //解析接口状态
				      "msg": "OK", //解析提示文本
				      "count": 100, //解析数据长度
				      "data": res //解析数据列表
				    };
				}
			    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			    ,cols: [[
			      {field:'id', width:100, title: 'ID', sort: true}
			      ,{field:'goodname', width:180, title: '物品名'}
			      ,{field:'year', width:120, title: '年份', sort: true}
				  ,{field:'month', width:80, title: '月份', sort: true}
				  ,{field:'day', width:80, title: '日期', sort: true}
				  ,{fixed: 'right', width:250, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
			    ]]
			  });
			  
			  //监听工具条 
			  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			    var data = obj.data; //获得当前行数据
			    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
			   
			    if(layEvent === 'detail'){ //查看

					layer.alert('发现地点: '+'江安校区二基楼'+'<br>'+'招领founder:'+'	许xx同学'+'<br>'+'学院：	水利水电学院'+'<br>'+'手机号：13548411545	'+'<bar>');

				} else if(layEvent === 'del'){ //删除
			      layer.confirm('请再次确认招领', function(index){
			        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
			        layer.close(index);
			        //向服务端发送删除指令
					var id = obj.data.id;
					$.ajax({
						url:"http://localhost:8080/webDemo_war_exploded/delServlet?id="+id,
						success:function(res){
							console.log(res)
						}
					})
			      });
			    } else if(layEvent === 'edit'){ //编辑
			      //do something
			      
			      //同步更新缓存对应的值
			      obj.update({
			        username: '123'
			        ,title: 'xxx'
			      });
			    } else if(layEvent === 'LAYTABLE_TIPS'){
			      layer.alert('Hi，头部工具栏扩展的右侧图标。');
			    }
			  });
			});
		}
		
		tableInit("http://localhost:8080/webDemo_war_exploded/findAllServlet");
		
		//第一种：主动加载jquery模块
		layui.use(['jquery', 'layer'], function(){ 
		  var $ = layui.$ //重点处
		  ,layer = layui.layer;
		  
		  //后面就跟你平时使用jQuery一样
		  $('#findById').on('click',function(res){
			  var id = $(this).parent().parent().find(".layui-input").val();
			  tableInit("http://localhost:8080/user/queryById/"+id)
		  })
		});
		
		</script>
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs" lay-event="detail">查看具体信息</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">认领</a>
		  
		  <!-- 这里同样支持 laytpl 语法，如： -->
		  {{#  if(d.auth > 2){ }}
		    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
		  {{#  } }}
		</script>
	</body>
</html>
